import React, { useState, forwardRef, useImperativeHandle } from 'react'
import Drop from '../drop'
import { Card } from 'antd'
import ProgramItem from "../programItem";
import styles from './index.module.scss'

export interface Props {
    children?: React.ReactElement,
    getDropData: (data: File) => void
}

export interface Ref {
    reset: () => void
}

const Header: React.ForwardRefRenderFunction<Ref, Props> = ({ getDropData }, ref) => {
    const [files, setFiles] = useState<File[]>([])

    const onDropHandle = (data: File) => {
        getDropData(data)

        setFiles([data])
    }


    useImperativeHandle(ref, () => {
        return {
            reset() {
                setFiles([])
            }
        }
    })

    return (
        <Card title="请将electron应用拖动到以下区域">
            <div className={styles.tips_box}>
                提示：
                <div>mac系统请到应用程序目录下把相关应用拖进来即可</div>
                <div>windows系统请把后缀名为exe文件拖入，拖入快捷方式无效</div>
            </div>
            <Drop onDropHandle={onDropHandle} />
            <div className={ styles.list_box }>
                <div>当前调试的程序：</div>
                {
                    files.map((item, index) => {
                        return  <ProgramItem key={index} item={item}/>
                    })

                }
            </div>
        </Card>
    )
}

export default forwardRef(Header)